<template>
    <yk-table >
      <yk-table-column property="name" label="分组名称"></yk-table-column>
      <yk-table-column property="bir" label="关联文章数"></yk-table-column>
      <yk-table-column property="time" label="创建时间"></yk-table-column>
      <yk-table-column
        property="manage"
        label="操作"
        align="right"
      ></yk-table-column>
      <template #tbody>
        <tr v-for="(item, index) in subsetStore.data" :key="index" class="yk-table__row">
          <td class="yk-table__cell">
            <yk-input v-model="item.name" @focus="focusSubset(item.id)" @blur="blurSubset(item.id)"/>
          </td>
          <td class="yk-table__cell">
            {{ item.value }}
          </td>
          <td class="yk-table__cell">
            {{ getTimeYMDHMS(item.created_at) }}
          </td>
          <td class="yk-table__cell text-right">
            <yk-text type="primary" style="cursor: pointer" @click="deleteSubset(item.id)">删除</yk-text>
          </td>
        </tr>
      </template>
    </yk-table>
  </template>
  <script setup lang="ts">
  import { getCurrentInstance } from 'vue';
  import { useSubsetStore } from '../../stores/subset';
import { useUserStore } from "../../stores/user";
import { useCode } from "../../hooks/codeHook";
import {getTimeYMDHMS} from "../../utils/time"
import { deleteSubsetApi } from '../../api/subset_api';
const { tackleCode } = useCode();
const userStore = useUserStore();
  const subsetStore = useSubsetStore();
  const proxy: any = getCurrentInstance()?.proxy; //获取消息框实例

// 当前分组名称
let nowName: string | number;

  // 聚焦名称
  const focusSubset = (id: number | string) => {
    let result = subsetStore.data.find((item: { id: number | string }) => item.id == id);
    if (result) {
      nowName = result.name;
      result.name = '';
    }
  };

  // 失去焦点
  const blurSubset = (id: number | string) => {
    let result = subsetStore.data.find((item: { id: number | string }) => item.id == id);
    if (result && nowName !== result.name) {
        // 提交后端处理
      result.name = String(nowName);
      proxy.$message({ type: 'primary', message: '修改成功' });
    }
  };

  // 删除分组
  const deleteSubset = (id: number) => {
    let request={
      token:userStore.token,
      id:id,
    }
    deleteSubsetApi(request).then((res: any) => {
      if (tackleCode(res.data.code)) {
        subsetStore.data = subsetStore.data.filter((item: { id: number }) => item.id !== id);
        proxy.$message({ type: 'primary', message: '删除成功' });
      }
    })
     
  };

  </script>
